<template>
  <div class="order-query-wrapper">
    <div class="content">
      <el-row style="margin: 30px 0 0 30px;">
        <el-col :span="8">
          <h3>基本信息</h3>
        </el-col>
      </el-row>
      <el-row style="margin: 50px 0 0 50px;">
        <el-col :span="8">
          <span><strong>客户编号：</strong></span>
        </el-col>
        <el-col :span="8">
          <span><strong>商家名称：</strong></span>
        </el-col>
        <el-col :span="8">
          <span><strong>客户编号：</strong></span>
        </el-col>
      </el-row>
      <el-row style="margin: 50px 0 0 50px;">
        <el-col :span="8">
          <span><strong>客户名称：</strong></span>
        </el-col>
        <el-col :span="8">
          <span><strong>客户类别：</strong></span>
        </el-col>
        <el-col :span="8">
          <span><strong>行业类别：</strong></span>
        </el-col>
      </el-row>
      <el-row style="margin: 50px 0 0 50px;">
        <el-col :span="8">
          <span><strong>证件类别：</strong></span>
        </el-col>
        <el-col :span="8">
          <span><strong>证件号码：</strong></span>
        </el-col>
      </el-row>
      <el-row style="margin: 50px 0 0 50px;">
        <el-col :span="8">
          <span><strong>客户地址：</strong></span>
        </el-col>
      </el-row>
      <el-row style="margin: 50px 0 0 50px;">
        <el-col :span="8">
          <span><strong>详细地址：</strong></span>
        </el-col>
      </el-row>
      <el-row style="margin: 50px 0 0 50px;">
        <el-col :span="8">
          <span><strong>备注：</strong></span>
        </el-col>
      </el-row>
      <hr/>
      <el-row style="margin: 30px 0 0 30px;">
        <el-col :span="8">
          <h3>供电信息</h3>
        </el-col>
      </el-row>
      <hr/>
      <el-row style="margin: 30px 0 0 30px;">
        <el-col :span="8">
          <h3>账户信息</h3>
        </el-col>
      </el-row>
      <el-row style="margin: 50px 0 0 50px;">
        <el-col :span="8">
          <span><strong>开户行：</strong></span>
        </el-col>
        <el-col :span="8">
          <span><strong>银行账户户名：</strong></span>
        </el-col>
        <el-col :span="8">
          <span><strong>银行账号：</strong></span>
        </el-col>
      </el-row>
      <el-row style="margin: 50px 0 0 50px;">
        <el-col :span="8">
          <span><strong>关联协议号：</strong></span>
        </el-col>
        <el-col :span="8">
          <span><strong>委托收款协议：</strong></span>
        </el-col>
      </el-row>
      <hr/>
      <el-row style="margin: 30px 0 0 30px;">
        <el-col :span="8">
          <h3>联系信息</h3>
        </el-col>
      </el-row>
      <el-table :data="tableData" style="width: 100%; margin: 30px 0 0 50px;" :header-cell-style="{background:'#eef1f6',color:'#606266'}">
        <el-table-column prop="serialNumber" label="序号" width="180" />
        <el-table-column prop="contactName" label="联系人姓名" width="180" />
        <el-table-column prop="position" label="职务" />
        <el-table-column prop="contactPhone" label="联系电话" width="180" />
        <el-table-column prop="contactEmail" label="联系邮箱" width="180" />
        <el-table-column prop="remarks" label="备注" />
      </el-table>
    </div>
    <div class="footer">
      <el-button @click="onReset">返回</el-button>
    </div>
  </div>
</template>
<script lang="ts" setup>

//序号 联系人姓名 职务 联系电话 联系邮箱 备注
const tableData = [
  {
    serialNumber: 1,
    contactName: '张三',
    position: '技术经理',
    contactPhone: '13800138000',
    contactEmail: 'zhangsan@example.com',
    remarks: '负责技术对接与方案设计'
  },
  {
    serialNumber: 2,
    contactName: '李四',
    position: '商务总监',
    contactPhone: '13900139000',
    contactEmail: 'lisi@example.com',
    remarks: '负责商务合作洽谈与合同签订'
  },
  {
    serialNumber: 3,
    contactName: '王五',
    position: '客服主管',
    contactPhone: '13700137000',
    contactEmail: 'wangwu@example.com',
    remarks: '处理客户咨询与售后问题'
  },
  {
    serialNumber: 4,
    contactName: '赵六',
    position: '项目经理',
    contactPhone: '13600136000',
    contactEmail: 'zhaoliu@example.com',
    remarks: '负责项目进度管理与资源协调'
  },
  {
    serialNumber: 5,
    contactName: '孙七',
    position: '财务专员',
    contactPhone: '13500135000',
    contactEmail: 'sunqi@example.com',
    remarks: '处理发票开具与款项结算事宜'
  }
]
const onReset = () => {
  console.log('submit!')
}
</script>
<style lang="scss" scoped>
.order-query-wrapper{
  display: flex;
  justify-content: center; /* 水平方向居中 */
  align-items: center;     /* 垂直方向居中 */
  width: 100%;
  height: 100%;
  background-color: lightcoral;

  .content{
    /* 比父容器宽小10px */
    width: calc(100% - 40px);
    /* 比父容器高小10px */
    height: calc(100% - 40px);
    background-color: #fff;
    border-radius: 30px;
    overflow-y: scroll;
  }
}
hr{
  margin-top: 20px;
  width: 96%;
  height: 2px;
  background-color: black;
}

</style>